import React, { Component } from 'react'
import '../asserts/css/cate.css'
import { cateList, cateGoodsList } from '../request/cate'

export default class cate extends Component {
    state = {
        //商品分类
        cate_list: [],
        //分类商品
        categoods_list: [],
        //中间量
        fid: 1,
        catename: ""
    }
    getGoods(id){
        cateGoodsList(id).then(res => {
            if (res.code === 200) {
                // console.log(res.list)
                this.setState({ categoods_list: res.list })
            }
        })
    }
    UNSAFE_componentWillMount() {
        //商品分类
        cateList().then(res => {
            if (res.code === 200) {
                // console.log()
                res.list.forEach(item=>{
                    if(item.id === this.state.fid){
                        this.setState({catename: item.catename})
                        return 
                    }
                })
                this.setState({ cate_list: res.list })
            }
        })
        this.getGoods(this.state.fid)

    }
    change(fid,catename) {
        //设置this.state.fid为当前id
        this.setState({ fid })
        this.setState({catename})
        //调用数据
        this.getGoods(fid)
    }
    render() {
        const {catename,cate_list,fid} = this.state
        return (
            <>
                <div className="page-title">商品分类</div>
                {/* <!-- 主体 --> */}
                <div id="content">
                    <ul className="left">
                        {
                            cate_list.map(item => {
                                return <li className={this.state.fid === item.id ? "active" : ""} key={item.id} onClick={() => this.change(item.id,item.catename)}>{item.catename}</li>
                            })
                        }
                    </ul>
                    <ul className="right">
                        <li className="section">
                            <div className="section-title">
                                <h3>{catename}</h3>
                                <a href={"/goodslist?id="+fid}>查看更过&gt;&gt;</a>
                            </div>
                            <ul>
                                {
                                    this.state.categoods_list.map(item => {
                                        return <li key={item.id}>
                                            <img src={this.$static_url+item.img} alt="" />
                                            <p>{item.goodsname.substr(0,3)}.......</p>
                                        </li>
                                    })
                                }
                            </ul>
                        </li>
                    </ul>
                </div>
            </>
        )
    }
}
